<template> 
    <div class="detailBottom">
        <flexbox :gutter="0">
            <flexbox-item :span="1/6">
                <router-link to="/" tag="div" class="bottom-back bottom-common" >
                    <div>
                        <svg class="icon cell_icon" aria-hidden="true" style="width:.36rem;height:.36rem;margin-top:.18rem;">
                            <use xlink:href="#icon-fanhui"></use>
                        </svg>
                        <span class="bottom-back__tips">返回</span>
                    </div>
                </router-link>
            </flexbox-item>
            <flexbox-item :span="1/6">
                <div class="bottom-share bottom-common">
                    <div>
                        <svg class="icon cell_icon" aria-hidden="true" style="width:.36rem;height:.36rem;margin-top:.17rem;">
                            <use xlink:href="#icon-fenxiang"></use>
                        </svg>
                        <span class="bottom-back__sharetips">分享</span>
                    </div>
                </div>
            </flexbox-item>
            <flexbox-item :span="1/3"><div class="bottom-consult bottom-common">心动</div> </flexbox-item>
            <flexbox-item :span="1/3">
                <div class="bottom-apply bottom-common">私信</div>
            </flexbox-item>
        </flexbox>
    </div>
</template>

<script>
import { Flexbox, FlexboxItem } from 'vux'
import { mapMutations } from 'vuex'
export default {
    name: "DetailBottom",
    components: {
        Flexbox,
        FlexboxItem
    },
    props: {

    },
    data () {
        return {
            
        }
        
    },
    methods: {
        handleRegisterClick () {
            this.open_Detail_Signup()
        },
        ...mapMutations([
            'change_Detail_MaskerType',
            'open_Detail_Signup'
        ])
    }
}
</script>

<style lang="stylus" scoped>
.detailBottom
    position: fixed
    bottom: 0
    left: 0
    right: 0
    background-color: #fff
    box-shadow: 0 0 1px 1px  #e8e8e8
    .bottom-common
        text-align: center
        height: 1rem
    .bottom-back
        border-right: 1px solid #e8e8e8
        color: #c4c4c4
        position: relative
        .bottom-back__tips
            position: absolute 
            bottom: .15rem
            width: 100%
            left: 0
    .bottom-share
        color: #c4c4c4
        position: relative
        .bottom-back__sharetips
            position: absolute 
            bottom: .15rem
            width: 100%
            left: 0
    .bottom-consult
        line-height: 1rem
        color: #fff
        background-color: #e859a6
    .bottom-apply
        line-height: 1rem
        color: #fff
        background-color: #5dc752
</style>